<template>
	<view class="orders">
		<u-sticky >
			<u-tabs :list="tabsList" lineColor="#FF4105" :activeStyle="{
          color: '#333',
        }" :inactiveStyle="{
          color: '#c2c1c1',
        }" :lineWidth="30" :current="currentTab" @click="onClickTab" />
		</u-sticky>
		<view class="orders-content">
			<!-- 订单列表 -->
			<!-- v-if="ordersList.length" -->
			<view class="orders-list" >
				<view v-for="item in 3" :key="item.id" class="orders-item">
					<!-- <view class="top flex-between" > -->
					<view class="top flex-between" @click="Tobepaid()">
						<view class="flex-center">
							<!-- <u-image :src="item.venue.venue_thumb" width="40rpx" height="40rpx" shape="square">
							</u-image> -->
							<u-image :src="`${assetsPath}44d8d751bb60e10cc8e83c114d488541605662f5.png`" width="30rpx"
								height="30rpx" shape="square"></u-image>
							<view style="margin-left: 16rpx">苏州体育中心</view>
						</view>
						<view class="status">
							<view class="" > 待付款 </view>
							<!-- <view class="done" v-else-if="item.order_status === 1">
								已支付
							</view> -->
						</view>
					</view>
					<!-- v-if="item.order_status != 2 " -->
					<block >
						<view class="it">
							<view v-for="it in 1" :key="it.id" class="its">
								<view class="" style="font-size: 24rpx;display: flex;lex-direction: row;" >
									<view class="">
										订单号:
									</view>
									<u-tooltip text="55555555555" overlay></u-tooltip>
								</view>
								
								<view class="content d-flex" @click="Tobepaid()">
									<u-image :src="it.goods_image" width="180rpx" height="180rpx" radius="16rpx" />

									<view class="right-content">
										<view class="flex-between">
											<view class="name ellipsis-2" style="width: 396rpx;">篮球</view>
											<view class="name ellipsis-2">×2</view>
										</view>
										<view>
											<!-- <view class="time">{{ it.consumption_type }}</view> -->
											<view class="flex-between">
												<price :value="it.deposit" :color="'#ffaa00'"></price>
												<view class="count">押金</view>
											</view>
										</view>
										<view>
											<!-- <view class="time">{{ it.consumption_type }}</view> -->
											<view class="flex-between">
												<price :value="it.goods_price" :color="'#ff4105'"></price>
												<view class="count">200</view>
											</view>
										</view>
									</view>
								</view>
								<view class="bottom">
									<view >
										<view class="flex-between">
											<text style="color: #5677fc"></text>
											<view class="d-flex">
												<u-button text="驳回申请" @click="requestInvoicing(item)" shape="circle" plain color="#999999"></u-button>
												<u-button text="同意退款" @click="requestRefund(it)" shape="circle" plain color="#FF4105"></u-button>
											</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</block>
					<view class="bottom" style="margin:0; ">
						<view>
							<view class="flex-between">
								<!-- <text style="color: #ec7e2f;margin-top: -110rpx;font-size: 30rpx;font-weight: 400;">{{ item.sum }}</text> -->

								<view style="color: #ec7e2f;margin-top: -120rpx;font-size: 30rpx;">
									<view class="" style="margin-top: 20rpx;" >
										卡扣(
										{{ parseFloat(item.numcard_sub_price) + parseFloat(item.numcard_main_price )}} )
									</view>
									<view class="">
										应付:<text
											style="color: #ff4105;margin-top: -110rpx;font-size: 34rpx;font-weight: bold;">100</text>
									</view>

								</view>
							</view>
						</view>
					</view>
					<view class="bottom" style="margin:0;" v-if=" item.order_status === 1 ">
						<view>
							<view class="flex-between">
								<!-- <text style="color: #ec7e2f;margin-top: -110rpx;font-size: 30rpx;font-weight: 400;">{{ item.sum }}</text> -->

								<view style="color: #ec7e2f;margin-top: -150rpx;font-size: 30rpx;">
									<view class="" style="margin-top: 30rpx;" v-if="item.numcard_id != 0">
										卡扣(
										{{ parseFloat(item.numcard_sub_price) + parseFloat(item.numcard_main_price) }} )
									</view>
									<view class="">
										实付:<text
											style="color: #ff4105;margin-top: -110rpx;font-size: 34rpx;font-weight: bold;">{{ item.sum }}</text>
									</view>

								</view>
							</view>
						</view>
					</view>
					<view class="bottom" style="margin:0;padding-bottom: 20rpx " v-if="item.order_status === 7 ">
						<view>
							<view class="flex-between">
								<!-- <text style="color: #ec7e2f;margin-top: -110rpx;font-size: 30rpx;font-weight: 400;">{{ item.sum }}</text> -->

								<view style="color: #ec7e2f;margin-top: -60rpx;font-size: 30rpx;">
									<view class="" style="margin-top: 20rpx;" v-if="item.numcard_id != 0">
										卡扣(
										{{parseFloat(item.numcard_sub_price) + parseFloat(item.numcard_main_price) }} )
									</view>
									<view class="">
										实付:<text
											style="color: #ff4105;margin-top: -110rpx;font-size: 34rpx;font-weight: bold;">{{ item.sum }}</text>
									</view>

								</view>
							</view>
						</view>
					</view>
				</view>
			</view>

			<u-empty v-if="empty_s" mode="order" icon="http://cdn.uviewui.com/uview/empty/order.png" />
		</view>
	</view>
</template>

<script>
	// import QSNavbar from "@/components/QS-Navbar/QS-Navbar.vue";
	const person = require("@/api/personal/index.js");
	const venues = require("@/api/venues/venues.js");
	/*
		状态
		1：待付款
		2：未完成
		3：已完成
		4：售后
	*/
	export default {
		// components: {
		// 	QSNavbar,
		// },
		data() {
			return {
				// list2: [{
				// 	image: 'https://cdn.uviewui.com/uview/swiper/swiper2.png',
				// 	value:'111',
				// 	url:'https://www.uviewui.com/'
				// }, {
				// 	image: 'https://cdn.uviewui.com/uview/swiper/swiper1.png',
				// 	value:'222',
				// 	url:'https://uniapp.dcloud.net.cn/'
				// }, {
				// 	image: 'https://cdn.uviewui.com/uview/swiper/swiper3.png',
				// 	value:'333',
				// 	url:'https://www.baidu.com/'
				// }],
				list1: [],
				assetsPath: this.$https.assetsPath,
				navbarHeigth: null,
				currentTab: 0,
				navbarItems_1: [{
					type: "icon",
					icon: "left",
					layout: "left",
					width: 15,
					iconColor: "#000",
					// doEvent: "back",
					doEvent: "navigateTo",
					// targetPath:'/pages/personal/personal'
				}, ],
				tabsList: [{
						name: "全部订单"
					},
					{
						name: "待付款"
					},
					// {
					// 	name: "未完成"
					// },
					{
						name: "已付款"
					},
					{
						name: "退款/取消"
					},
				],
				searchValue: "",
				ordersList: [],
				searchKey: "", //搜索关键词
				val: '', //关键词
				orderStatus: '',
				listQuery: { //分页
					pageNo: 1,
					pageSize: 6,
				},
				totalPage: '', //几页
				empty_s: false,
				goods_type: '',
				ticketData: {},
				amountValue: 1,
				spec: "",
				order_remarks: '',
				train_price: "0.00",
				lop: ""
			};
		},
		computed: {
			_ordersList() {
				return this.currentTab === 0 ?
					this.ordersList :
					this.ordersList.filter((i) => i.status === this.currentTab);
			},
		},
		onLoad({
			tab = 0
		}) {
			this.listQuery.pageNo = 1
			this.ordersList = [];
			this.currentTab = Number(tab);
			if (this.currentTab === 1) {
				// this.getOrdersList(2);
				this.orderStatus = '2'
			}
			//  else if (this.currentTab === 2) {
			// 	// this.getOrdersList(3);
			// 	this.orderStatus = '3'
			// }
			else if (this.currentTab === 2) {
				// this.getOrdersList(1);
				this.orderStatus = '1'
			} else if (this.currentTab === 3) {
				// this.getOrdersList(5);
				this.orderStatus = '14' // 6 退款中/7 退款成功状态
			} else {
				// this.getOrdersList("all");
				this.orderStatus = 'all'
			}
			// this.getOrdersList();
			// this.getChannelBanner()

		},
		// onReady() {
		// 	this.$refs.navbar.getQuery((res) => {
		// 		this.navbarHeigth = res.height;
		// 	});
		// },
		onShow() {
			// let that = this;
			// that.listQuery.pageNo = 1
			// that.ordersList = [];
			// that.getOrdersList()
		},
		methods: {

			// 获取我的待付款订单
			async getChannelBanner() {
				let postData = {
					app_id: this.$https.weixinAppId,
					project_id: getApp().globalData.projectId,
				};
				let res = await person.getChannelBanner(postData);
				if (res.code == 1) {
					this.list1 = res.data.result.channel_banner_order
				}
			},
			onClickTab({
				index
			}) {
				this.currentTab = index;
				this.ordersList = [];
				this.listQuery.pageNo = 1
				// this.getOrdersList();
			},

			// 获取我的待付款订单
			async getOrdersList() {
				let that = this;
				if (this.listQuery.pageNo === 1) that.ordersList = [];
				// uni.showLoading({
				// 	title: "加载中...",
				// 	mask: true,
				// });
				let postData = {
					app_id: this.$https.weixinAppId,
					project_id: getApp().globalData.projectId,
					owner: uni.getStorageSync("phone"),
					orderStatus: this.orderStatus,
					search_field: this.val,
					page: this.listQuery.pageNo,
					limit: this.listQuery.pageSize,
				};
				let res = await person.getMyOrder(postData);
				// this.$nextTick(() => {
				// 	uni.hideLoading();
				// });
				if (res.code == 1) {
					that.ordersList = that.ordersList.concat(res.data.data.data); //将数据拼接在一起
					that.totalPage = res.data.data.last_page
				} else if (res.code == 0) {
					// this.$ui.toast(res.msg);
					this.ordersList = []
					this.empty_s = true

				}
			},
			// 下拉刷新
			onReachBottom() {
				// uni.showLoading({
				// 	title: '加载中'
				// });
				if (this.totalPage <= this.listQuery.pageNo) {
					// uni.hideLoading();
					uni.showToast({
						title: '没有更多了',
						duration: 2000,
						icon: 'none'
					});
					return
				}
				this.listQuery.pageNo += 1;
				this.getOrdersList()
			},
			// 去支付
			// 金额计算保留两位小数
			amount(value) {
				return parseFloat(value).toFixed(2);
			},
			// 跳转详情
			Tobepaid() {
				if (this.currentTab === 1) { // 待支付
					uni.navigateTo({
						url: `/page_other/paidDetail/paidDetail`,
					})
				}
				else if (this.currentTab === 3) { // 未完成
					uni.navigateTo({
						url: '/page_other/paidDetail/unpaidDetail'
					})
				} else if (this.currentTab === 2) { // 已完成
					uni.navigateTo({
						url: '/page_other/paidDetail/completedDetail'
					})
				}
			},
		},
	};
</script>

<style lang="scss" scoped>
	.orders {
		background-color: #f1f2f2;
		min-height: 100vh;
		padding-bottom: env(safe-area-inset-bottom);
		
		
		/deep/.u-tabs {
			background-color: #fff;

			.u-tabs__wrapper__nav__item {
				flex: 1;
			}

			.u-tabs__wrapper__nav__line {
				bottom: 0;
			}
		}

		/deep/.u-input {
			height: 100%;
			border-color: #2f75fa !important;
		}

		.orders-content {
			padding: 20rpx 40rpx 60rpx;
		}

		.orders-item {
			background-color: #fff;
			border-radius: 20rpx;
			padding: 30rpx 24rpx 0;

			&+.orders-item {
				margin-top: 20rpx;
			}

			.not-done {
				color: #ff4207;
			}

			.status {
				white-space: nowrap;
				margin-left: 10rpx;
			}

			.it {
				padding: 24rpx 0;
			}

			.its {
				// padding: 24rpx 0;
				padding: 0 0 24rpx 0;
			}

			.content {
				margin-top: 20rpx;

				.right-content {
					margin-left: 24rpx;
					display: flex;
					justify-content: space-between;
					flex-direction: column;
					flex: 1;
					font-size: 28rpx;
					color: rgb(51, 51, 51);
				}

				.time {
					padding: 0 24rpx;
					background-color: rgb(243, 243, 243);
					display: inline-block;
					border-radius: 100px;
					margin-bottom: 10rpx;
				}

				.price {
					.rmb {
						font-size: 24rpx;
					}

					.big {
						font-size: 36rpx;
						color: #ff4207 !important;
					}
				}
			}

			.bottom {
				font-size: 24rpx;
				margin-top: 30rpx;

				/deep/.u-button {
					width: 160rpx;
					height: 60rpx;
					line-height: 60rpx;

					&+.u-button {
						margin-left: 20rpx;
					}
				}
			}
		}
	}
</style>